<template>
  <div class="nav-bar">
    <el-button @click="$router.push('/dashBoard')"  size="mini" :class="{active: $route.path === '/dashBoard'}">到首页</el-button>
    <el-button  size="mini" @click="swicthNav(nav.path)"  v-for="(nav, index) in $store.state.menu.navTabs" :class="{active: $route.path === nav.path}" :key="nav.path">
        {{ nav.label }}
        <i class="el-icon-delete" @click.stop="deleteTab(index)"></i>
    </el-button>
  </div>
</template>

<script>
export default {
  methods: {
    deleteTab (index) {
      // 点击删除 icon 删除 tab
      this.$store.commit('menu/DELETE_NAVTAB', index)
      const navTabs = this.$store.state.menu.navTabs
      // 如果全部删除完毕 应该 跳转到首页
      if (navTabs.length === 0) {
        this.$router.push('/dashBoard')
        return false
      }
      // 路由应该回退上一次访问的那个路由 （go(-1)） 跳转一次 navTabs数组中push一个 数组的最后一个永远最后访问的那个路由

      this.$router.push(navTabs[navTabs.length - 1])
    },
    swicthNav (path) {
      // 点击navTab跳转路由
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar{
  display: flex;
  height: 38px;
  background-color: #fff;
  padding-left: 10px;
  border-top: 1px solid #d8dce5;
  align-items: center;
 ::v-deep button{
    &.active{
      background-color: #42b983;
      border-color: #42b983;
      span{
        color: #fff;
      }
    }
  }
}
</style>
